<template>
  <div>
    <a-modal v-model="currentVouVisible" centered title="优惠券详情" :footer="null" width="800px" @cancel="currentVouVisible = false" :destroyOnClose="true">
      <a-form-model ref="ruleForm" :model="detail" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="模板ID">
          <div>
            <div>{{ detail.awardId }}</div>
          </div>
        </a-form-model-item>
        <a-form-model-item label="券名称">{{ detail.voucherName }} </a-form-model-item>
        <a-form-model-item label="券类型">
          <div>
            <div>{{ detail.type }}</div>
          </div>
        </a-form-model-item>
        <a-form-model-item label="券面值">
          <div>
            <div>{{ detail.type== "满减券"?detail.amount+ '元':detail.discount * 10+'折'}}</div>
          </div>
        </a-form-model-item>
        <a-form-model-item label="库存">
          <div>
            <div>{{ detail.voucherStock }}</div>
          </div>
        </a-form-model-item>
        <a-form-model-item label="有效期">
          <div>
            <div>{{ detail.period||'无' }}</div>
          </div>
        </a-form-model-item>
        <a-form-model-item label="适用品牌">
          <div>
            <div>{{ detail.useBrand || '无'}}</div>
          </div>
        </a-form-model-item>
        <a-form-model-item label="使用说明">
          <div>
            <div v-if="detail.voucherDesc" v-html="detail.voucherDesc"></div>
            <div v-else>无</div>
          </div>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
export default {
  props: {
    detail: {
      type: Object,
      default: ''
    },
    vouVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      visible: false
    }
  },
  computed: {
    currentVouVisible: {
      get () {
        return this.vouVisible
      },
      set (val) {
        this.$emit('update:vouVisible', val)
      }
    },
  },
  methods: {
    // 关闭弹窗
    close() {
      this.visible = false
    },
    show() {
      this.visible = true
    }
  }
}
</script>
<style lang="less" scoped>
.details-wrapper {
  display: flex;
  padding-bottom: 40px;
  .main-img {
    width: 120px;
    height: 120px;
    margin-right: 10px;
  }

  .text {
    flex: 1;

    line-height: 25px;
    font-size: 14px;
  }
}
.frequency {
  color: #aaa;
}
.imgs {
  width: 100px;
  height: 100px;
  cursor: pointer;
  margin-right: 10px;
}

/deep/.ant-modal-body {
  max-height: calc(85vh - 100px);
  overflow-y: auto;
  &::-webkit-scrollbar {
    width: 6px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
  }

  &::-webkit-scrollbar-thumb {
    background: #e3e3e6;
    border-radius: 6px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;

    border-radius: 5px;
  }
}
</style>

